<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Calendar Split Button</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/calendar/calendar.js"></script>
<script type="text/javascript" src="../../build/container/container.js"></script>
<script type="text/javascript" src="../../build/element/element-beta.js"></script>
<script type="text/javascript" src="../../build/button/button.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">

    /*
        Set the "zoom" property to "normal" since it is set to "1" by the 
        ".example-container .bd" rule in yui.css and this causes a Menu
        instance's width to expand to 100% of the browser viewport.
    */
    
    div.yuimenu .bd {
    
        zoom: normal;
    
    }


    #calendarmenu {
    
        position: absolute;
    
    }


    /*
        Restore default padding of 10px for the calendar containtainer 
        that is overridden by the ".example-container .bd .bd" rule 
        in yui.css.
    */

    #calendarcontainer {

        padding:10px;

    }

</style>
<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>Calendar Split Button</h1>

<div class="exampleIntro">
	<p>
This example demonstrates how to create a Split Button whose menu displays a 
Calendar.  Selecting a date from the Calendar updates the label of the Button 
to reflect the currently selected date.
</p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<script type="text/javascript">

    YAHOO.util.Event.onContentReady("datefields", function () {

        function onButtonOption() {

            /*
                 Create an empty body element for the Overlay instance in order 
                 to reserve space to render the Calendar instance into.
            */

            oCalendarMenu.setBody("&#32;");

            oCalendarMenu.body.id = "calendarcontainer";


            // Render the Overlay instance into the Button's parent element

            oCalendarMenu.render(this.get("container"));


            // Align the Overlay to the Button instance

            oCalendarMenu.align();


            /*
                 Create a Calendar instance and render it into the body 
                 element of the Overlay.
            */

            var oCalendar = new YAHOO.widget.Calendar("buttoncalendar", oCalendarMenu.body.id);

            oCalendar.render();



            /* 
                Subscribe to the Calendar instance's "changePage" event to 
                keep the Overlay visible when either the previous or next page
                controls are clicked.
            */

            oCalendar.changePageEvent.subscribe(function () {
                
                window.setTimeout(function () {

                    oCalendarMenu.show();
                
                }, 0);
            
            });


            /*
                Subscribe to the Calendar instance's "select" event to 
                update the Button instance's label when the user
                selects a date.
            */

            oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) {

                var aDate;

                if (p_aArgs) {
                    
                    aDate = p_aArgs[0][0];
                        
                    oButton.set("label", (aDate[1] + "/" + aDate[2] + "/" + aDate[0]));

                }
                
                oCalendarMenu.hide();
            
            });


            /*
                 Unsubscribe from the "option" event so that this code is 
                 only executed once
            */

            this.unsubscribe("option", onButtonOption);
        
        }


        // Create a Overlay instance to house the Calendar instance

        var oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu");


        // Create a Button instance of type "split"

        var oButton = new YAHOO.widget.Button({ 
                                        type: "split", 
                                        id: "calendarpicker", 
                                        label: "Choose A Date", 
                                        menu: oCalendarMenu, 
                                        container: this });


        /*
            Add a listener for the "option" event.  This listener will be
            used to defer the creation the Calendar instance until the 
            first time the Button's Overlay instance is requested to be displayed
            by the user.
        */        

        oButton.on("option", onButtonOption);
    
    });

</script>

<form id="button-example-form" name="button-example-form" method="post" action="#">

    <fieldset id="datefields">

        <label for="calendarpicker">Date: </label>

    </fieldset>

</form>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>